<template>
  <a-modal
    title="历史流程"
    style="top: 0px;width:100%"
    width="100%"
    height="100%"
    v-model="visible"
    :confirmLoading="confirmLoading"
  >
<!--    <a-radio-group v-model="tabPosition" style="margin:8px">-->
<!--      <a-radio-button value="top">top</a-radio-button>-->
<!--      <a-radio-button value="bottom">bottom</a-radio-button>-->
<!--      <a-radio-button value="left">left</a-radio-button>-->
<!--      <a-radio-button value="right">right</a-radio-button>-->
<!--    </a-radio-group>-->
    <a-tabs defaultActiveKey="1" :tabPosition="tabPosition">
      <a-tab-pane tab="附加单据" key="1">Content of Tab 1</a-tab-pane>
      <a-tab-pane tab="任务处理" key="2">Content of Tab 2</a-tab-pane>
      <a-tab-pane tab="流程图" key="3"><actHiActinstList></actHiActinstList></a-tab-pane>
    </a-tabs>

  </a-modal>
</template>
<script>
import { saveActHiProcinst } from '@/api/activiti/actHiProcinst'
import actHiActinstList from '@/views/activiti/ActHiActinstList'
import pick from 'lodash.pick'
export default {
  name: 'ActHiProcinstModal',
  props: {
  },
  components: {
      actHiActinstList
  },
  data () {
    return {
      tabPosition: 'left',
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this)
    }
  },
  beforeCreate () {
  },
  created () {
  },
  methods: {
    add () {
      this.form.resetFields()
      this.edit({ id: 0 })
    },
    edit (record) {
      this.mdl = Object.assign(record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'id','procInstId','businessKey','procDefId','startTime','endTime','duration','startUserId','startActId','endActId','superProcessInstanceId','deleteReason','tenantId','name'))
      })
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
<style>
  .ant-modal-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    background-color: rgba(0,0,0,.65);
    filter: alpha(opacity=50);
  }
  .ant-modal {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    top: 100px;
    width: auto;
    margin: 0 auto;
    padding-bottom: 24px;
  }
</style>